<template>
	<view>
		<view class="bg_1"></view>
		<view class="flex_row_start_center home_top"   :style="{ top: 'calc(' + statusBarHeight + ' + 20rpx)' }">
			<view class="topic">今日势运</view>
		</view>
		<view :style="{ 'margin-top': 'calc(' + statusBarHeight + ' + 90rpx)' }" class="fortune">
			<view class="info_nav flex_row_start_center">
				<view v-for="(item, index) in navList"
						:key="index"
						class="nav-item"
						:class="{ current: tabCurrentIndex === index }"
						@click="tabClick(index)">{{item.text}}</view>
			</view>
			<view>
				<!-- 时间 -->
				<view class="flex_row_between_center fortune_date">
					<view class="fortune_date_l">
						<view>{{lunarInfo.nowDay}}</view>
						<view>{{lunarInfo.nowYear}}/{{lunarInfo.nowMonth}}</view>
					</view>
					<view>
						<view class="flex_row_between_center fortune_date_r">
							<view>事业</view>
							<progress :percent="30" stroke-width="13" border-radius='8'  activeColor="#9B4C3A" />
						</view>
						<view class="flex_row_between_center fortune_date_r">
							<view>爱情</view>
							<progress :percent="10" stroke-width="13" border-radius='8'  activeColor="#9B4C3A" />
						</view>
						<view class="flex_row_between_center fortune_date_r">
							<view>健康</view>
							<progress :percent="0" stroke-width="13" border-radius='8'  activeColor="#9B4C3A" />
						</view>
					</view>
				</view>
				<!-- 日历 -->
				<view class="fortune_calendar">
					<view class="fortune_calendar_title">{{lunarInfo.lunarMonth}}月{{lunarInfo.lunarDay}}</view>
					<view class=" fortune_calendar_list">
						<view>{{lunarInfo.ganZhiYear}}年 {{lunarInfo.ganZhiMonth}}月 {{lunarInfo.ganZhiDay}}日</view>
						<view class="fortune_calendar_good flex_row_start_center">
							<view class="fortune_calendar_good_icon">宜</view>
							<view class="flex_row_start_center home_calendar_good_labels">
								<view class="home_calendar_good_label " v-for="(item,index) in lunarInfo.yi" :key="index">{{item}}</view>
							</view>
							
						</view>
						<view class="fortune_calendar_good flex_row_start_center">
							<view class="fortune_calendar_good_icon2" >忌</view>
							<view class="flex_row_start_center home_calendar_good_labels">
								<view class="home_calendar_good_label " v-for="(item,index) in lunarInfo.ji" :key="index">{{item}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 老师建议 -->
				<view class="fortune_advise">
					<view class="flex_row_between_center fortune_advise_title">老师建议</view>
					<view class="fortune_advise_info">
						今天适宜萌生新想法、新灵感，让工作开展得更好。今天的你跟异性特别有缘，无论工作或是生活中都能获得异性的帮助，让事情得以顺利进行，也容易以此获得财源。但要警惕烂桃花或桃色绯闻，把握好交往的尺度。
					</view>
				</view>
				<!-- 运势走向 -->
				<view class="fortune_direction">
					<view class="flex_row_between_center fortune_direction_title">运势走向</view>
				    <view class="fortune_echarts">
						<view class="fortune_echarts_title">一周运势图</view>
						 <canvas canvas-id="JFFszHAUvcplsRXmYIpqmlFchgMwiCWo" id="JFFszHAUvcplsRXmYIpqmlFchgMwiCWo" class="charts" @touchend="tap"/>
					</view>
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	import {Solar,SolarMonth,Lunar,HolidayUtil}from'@/pages/common/lunar.js';
	import {sloarToLunar,getYearMonthDay,getDayGanzhi } from '@/utils/lunar.js'
    import uCharts from '@/utils/u-charts.js';
    var uChartsInstance = {};

	export default{
		data(){
			return{
				cWidth: 500,
				cHeight: 400,
				statusBarHeight:getApp().globalData.statusBarHeight+'px',
				tabCurrentIndex:1,
				navList: [{
						state: 0,
						text: '昨天',
						balanceList: [],
					},
					{
						state: 1,
						text: '今天',
						balanceList: [],
					},
					{
						state: 2,
						text: '明天',
						balanceList: [],
					},
					{
						state: 3,
						text: '后天',
						balanceList: [],
					},
				],
				lunarInfo:{
					nowYear:'',
					nowMonth:'',
					nowDay:'',
					lunarMonth:'',
					lunarDay:'',
					ganZhiYear:'',
					ganZhiMonth:'',
					ganZhiDay:'',
					yi:'',
					ji:''
				},
			}
		},
		onLoad(){
			this.getCurrentIndexInfo()
		},
		onReady() {
		  //这里的 750 对应 css .charts 的 width
		  this.cWidth = uni.upx2px(620);
		  //这里的 500 对应 css .charts 的 height
		  this.cHeight = uni.upx2px(440);
		  this.getServerData();
		},
		methods:{
			//获取宜忌
			getCurrentIndexInfo(){
				var d = Lunar.fromDate(new Date());
				var m = Solar.fromDate(new Date());

				if(this.tabCurrentIndex==1){
					this.lunarInfo.nowYear=m._p.year
					this.lunarInfo.nowMonth=this.withData(m._p.month)
					this.lunarInfo.nowDay=this.withData(m._p.day)
					this.lunarInfo.lunarMonth=d.getMonthInChinese()
					this.lunarInfo.lunarDay=d.getDayInChinese()
					this.lunarInfo.yi=d.getDayYi();
					this.lunarInfo.ji=d.getDayJi();
					this.lunarInfo.ganZhiYear=d.getYearInGanZhiExact()
					this.lunarInfo.ganZhiMonth=d.getMonthInGanZhiExact()
					this.lunarInfo.ganZhiDay=d.getDayInGanZhiExact()
				}else if(this.tabCurrentIndex==0){
					this.lunarInfo.nowYear=m.next(-1)._p.year
					this.lunarInfo.nowMonth=this.withData(m.next(-1)._p.month)  
					this.lunarInfo.nowDay=this.withData(m.next(-1)._p.day) 
					this.lunarInfo.lunarMonth=d.next(-1).getMonthInChinese()
					this.lunarInfo.lunarDay=d.next(-1).getDayInChinese()
					this.lunarInfo.yi=d.next(-1).getDayYi();
					this.lunarInfo.ji=d.next(-1).getDayJi();
					this.lunarInfo.ganZhiYear=d.next(-1).getYearInGanZhiExact()
					this.lunarInfo.ganZhiMonth=d.next(-1).getMonthInGanZhiExact()
					this.lunarInfo.ganZhiDay=d.next(-1).getDayInGanZhiExact()
					
				}else if(this.tabCurrentIndex==2){
					this.lunarInfo.nowYear=m.next(1)._p.year
					this.lunarInfo.nowMonth=this.withData(m.next(1)._p.month)
					this.lunarInfo.nowDay=this.withData(m.next(1)._p.day)
					this.lunarInfo.lunarMonth=d.next(1).getMonthInChinese()
					this.lunarInfo.lunarDay=d.next(1).getDayInChinese()
					this.lunarInfo.yi=d.next(1).getDayYi();
					this.lunarInfo.ji=d.next(1).getDayJi();
					this.lunarInfo.ganZhiYear=d.next(1).getYearInGanZhiExact()
					this.lunarInfo.ganZhiMonth=d.next(1).getMonthInGanZhiExact()
					this.lunarInfo.ganZhiDay=d.next(1).getDayInGanZhiExact()
					
				}else if(this.tabCurrentIndex==3){
					this.lunarInfo.nowYear=m.next(2)._p.year
					this.lunarInfo.nowMonth=this.withData(m.next(2)._p.month)
					this.lunarInfo.nowDay=this.withData(m.next(2)._p.day)
					this.lunarInfo.lunarMonth=d.next(2).getMonthInChinese()
					this.lunarInfo.lunarDay=d.next(2).getDayInChinese()
					this.lunarInfo.yi=d.next(2).getDayYi();
					this.lunarInfo.ji=d.next(2).getDayJi();
					this.lunarInfo.ganZhiYear=d.next(2).getYearInGanZhiExact()
					this.lunarInfo.ganZhiMonth=d.next(2).getMonthInGanZhiExact()
					this.lunarInfo.ganZhiDay=d.next(2).getDayInGanZhiExact()
				}
				
			},
			 withData(param) {
			  return param < 10 ? '0' + param : '' + param;
			},
			tabClick(index){
				this.tabCurrentIndex=index
				this.getCurrentIndexInfo()
			},  
			getServerData() {
					//模拟从服务器获取数据时的延时
					setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["周一","周二","周三","周四","周五","周六","周日"],
						series: [
						  {
							name: "运势",
							data: [35,35,25,37,35,20,22]
						  },
						]
					  };
					this.drawCharts('JFFszHAUvcplsRXmYIpqmlFchgMwiCWo', res);
					}, 500);
					},
					drawCharts(id,data){
					const ctx = uni.createCanvasContext(id, this);
					uChartsInstance[id] = new uCharts({
					type: "area",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					categories: data.categories,
					series: data.series,
					animation: true,
					background: "#FFFFFF",
					color: ['#de9ea0'],
					padding: [15,15,0,15],
					enableScroll: false,
					legend: {},
					xAxis: {
					  disableGrid: true
					},
					yAxis: {
					  gridType: "dash",
					  dashLength: 2
					},
					extra: {
					  area: {
						type: "curve",
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: true,
						activeType: "hollow"
					  }
					}
			 });
			},
			tap(e){
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			},
		}
	}
</script>

<style lang="scss">
	
	
	.home_calendar_good_labels{
		width: 580rpx;
		flex-wrap: wrap;
	}
	.home_calendar_good_label{
		display: inline-block;
		margin-right: 12rpx;
	}
	.bg_1 {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 148rpx;
		z-index: 99;
		right: 0;
		margin: 0 auto;
		background: #fff;
	}
	.home_top{
		position: fixed;
		left: 0;
		padding: 20rpx 35rpx;
		z-index: 999;
		width: 750rpx;
		background-color: #fff;
		
		.topic{
			font-size: 36rpx;
			color: #9B4C3A;
			font-family: SimSun;
			margin-right: 38rpx;
		}
	}
	.fortune{
	
		
		.fortune_date{
			background-color: #fff;
			padding:  60rpx 88rpx 0 66rpx;
			
			.fortune_date_r{
				width: 306rpx;
				font-size: 28rpx;
				margin-bottom: 60rpx;
				&:last-child{
					margin-bottom: 0;
				}
				& view:first-child{
					width: 56rpx;
					margin-right: 40rpx;
				}
				& progress{
					flex: 1;
				}
			}
			.fortune_date_l{
				& view:first-child{
					width: 124rpx;
					height: 110rpx;
					text-align: center;
					line-height: 110rpx;
					font-size: 96rpx;
					color: #9B4C3A;
					font-weight: bold;
				}
				& view:last-child{
					width: 132rpx;
					height: 46rpx;
					text-align: center;
					color:#9B4C3A;
					font-size: 32rpx;
				}
			}
		}
	}
	.info_nav{
		padding: 20rpx 88rpx;
		color: #8C8C8C;
		font-size: 32rpx;
		background-color: #fff;
		.nav-item{
			margin-right: 106rpx;
			
			&:last-child{
				margin-right: 0;
			}
			&.current {
			  color: #A76252;
			  font-size: 32rpx;
			  position: relative;
			  
			  &::after{
				content: '';
				position: absolute;
				left:50%;
				transform: translateX(-50%);
				bottom: -18rpx;
				height: 6rpx;
				width: 20px;
				background-color:#A76252;
			  }
			}
			
		}
	}
	
	.fortune_calendar{
		background-color: #fff;
		padding: 0 30rpx 0 52rpx;
		.fortune_calendar_title{
			color: #9B4C3A;
			font-size: 36rpx;
			font-family: SimSun;
		}
		
		.fortune_calendar_list{
			font-size: 28rpx;
			color: #4C4C4C;
			padding-bottom: 22rpx;
			
			
			
			.fortune_calendar_good{
				margin-top: 26rpx;
				color: #4C4C4C;
				font-size: 20rpx;
				
				.fortune_calendar_good_label{
					display: inline-block;
					margin-right: 12rpx;
				}
				
				.fortune_calendar_good_icon{
					font-size: 20rpx;
					padding:0 2rpx;
					border-radius: 4rpx;
					color: #9B4C3A;
					border: 1rpx solid #9B4C3A;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 10rpx;
				}
				.fortune_calendar_good_icon2{
					font-size: 20rpx;
					padding:0 2rpx;
					border-radius: 4rpx;
					color: #457350;
					border: 1rpx solid #457350;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 10rpx;
				}
				
			}
			
		
		}
	
	    
	}
	.fortune_advise{
		background-color: #fff;
		padding: 15rpx 44rpx 44rpx 44rpx;
		margin-top: 14rpx;
		position: relative;
		.fortune_advise_title{
			color: #4C4C4C;
			font-size: 28rpx;
			margin-bottom: 28rpx;
			&::after{
				content: '';
				position: absolute;
				left: 22rpx;
				top:6px;
				height: 14px;
				width: 4px;
				background-color:#9B4C3A;
			}
		}
		
		.fortune_advise_info{
			font-size: 28rpx;
			color: #343434;
		}
		
		
		
	}
	.fortune_direction{
		background-color: #fff;
		padding: 15rpx 44rpx 44rpx 44rpx;
		margin-top: 14rpx;
		position: relative;
		.fortune_direction_title{
			color: #4C4C4C;
			font-size: 28rpx;
			margin-bottom: 28rpx;
			&::after{
				content: '';
				position: absolute;
				left: 22rpx;
				top:6px;
				height: 14px;
				width: 4px;
				background-color:#9B4C3A;
			}
		}
		.fortune_echarts{
			// margin: 0 30rpx;
			padding: 30rpx 0rpx;
			border: 2rpx solid #f4dfde;
			border-radius: 15rpx;
			width: 662rpx;
			height: 640rpx;
			position: relative;
			.fortune_echarts_title{
				padding-left: 30rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #9B4C3A;
			}
			.fortune_line{
				position: absolute;
				left: 35rpx;
				top: 104rpx;
				height: 440rpx;
				font-size: 22rpx;
				background-color: #fff;
				z-index: 99999;
				& view{
					width: 48rpx;
					height: 58rpx;
					text-align: center;
					line-height: 58rpx;
					// background-color: yellow;
				}
			}
			.charts{
				position: absolute;
				left: 0;
				top: 100rpx;
			    width: 620rpx;
			    height: 440rpx;
			}
		}
		
	}
	
</style>